<template>
  <div>
    <div class="post-item-top-user">
      <div class="u-avatar">
        <van-image round width="1rem" height="1rem" :src="avatar" />
      </div>
      <div class="center">
        <div class="center-top">
          <div class="name">{{ name }}</div>
        </div>
        <div class="time">{{ new Date(time).toLocaleString() }}</div>
      </div>

      <van-popover
          placement="left"
          v-model:show="showPopover"
          :actions="actions"
          @select="onSelect"
        >
          <template #reference>
            <div
              :class="{ right: true, noMyself: !isMyself }"
              @click="handleCommentBadgeClick"
            >
              <van-icon name="weapp-nav" />
            </div>
          </template>
        </van-popover>
    </div>
    <div class="content">
      {{ props.data.content }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { findOneCommitById, findUserById ,deleteCommentById} from '@/api/service'
import { baseUrl } from '@/api/request'
import { Dialog, Toast } from 'vant'
import { useLocalStorage } from '@/utils/useLocalStorage'
const props = defineProps<{ data: any }>()
console.log(props.data.id)
const avatar = ref()
const name = ref()
const time = ref()
const emit = defineEmits(['init'])
onMounted(async () => {
  const res: any = await findOneCommitById(props.data.id)
  console.log('findOneCommitById',res)
  if (JSON.parse(useLocalStorage.get('userInfo')).id == res.data.userId) {
    isMyself.value = true
  }
  time.value = res.data.create_time
  const userRes: any = await findUserById(res.data.userId)
  console.log(userRes)
  avatar.value = `${baseUrl}/images/${userRes.data[0].avatar}`
  name.value = userRes.data[0].nickname
})


const isMyself = ref(false)



const handleCommentBadgeClick = () => {
  console.log('click Post badge')

}
const showPopover = ref(false)

// 通过 actions 属性来定义菜单选项
const actions = [{ text: '删除' }]
const onSelect = (action) => {
  if (action.text == '删除') {
    Dialog.confirm({
      message: '确认删除?',
    })
      .then(() => {
        // on confirm
        console.log('确认删除')
        console.log(props.data);
        
        deleteCommentById(props.data.id).then((res:any )=> {
          console.log(res);
          if (res.data.affected) {
            Toast('删除成功')
            setTimeout(() => {
              emit('init')
            }, 500);
          }
          
        })

      })
      .catch(() => {
        // on cancel
        console.log('取消删除')
      })
  }

}
</script>

<style scoped lang="scss">
.post-item-top-user {
  display: flex;
  height: 14vw;
  align-items: center;
  .u-avatar {
    width: 14vw;
    height: 14vw;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .center {
    flex: 1;
    div {
      // border: 1px solid #aaa;
      height: 7vw;
    }
    .center-top {
      display: flex;
      align-items: center;
      vertical-align: baseline;
      .official {
        color: white;
        height: 5vw;
        padding: 0 1vw 1vw 1vw;
        margin-top: 1vw;
        margin-left: 1vw;
        background-color: rgb(149, 172, 255);
        border-radius: 23%;
      }
      .top {
        color: white;
        height: 5vw;
        margin-top: 1vw;
        margin-left: 1vw;
        padding: 0 1vw 1vw 1vw;
        background-color: red;
        border-radius: 23%;
      }
      .vip {
        color: rgb(149, 172, 255);
        margin-top: 1vw;
        margin-left: 1vw;
        height: 5vw;
        padding: 0 1vw 1vw 1vw;
        background-color: rgb(253, 213, 214);
        border-radius: 23%;
      }
    }
    .time {
      color: #aaa;
    }
  }
  
  .noMyself {
      display: none;
    }
  .right {
    width: 14vw;
    height: 14vw;
    line-height: 14vw;

    align-items: center;

    i {
      width: 100%;
      height: 100%;
    }
  }
}
.content {
  width: 94vw;
  margin: auto;
  padding-bottom: 4vw;
  margin-bottom: 2vw;
  border-bottom: 1px solid #eee;
}
</style>
